<template>
	<view>
		<searchBar />
		<view class="category">
			<!-- 左测结构 -->
			<scroll-view class="categoryList" :scroll-y="true">
				<!-- 动态样式,两种写法都可以 -->
				<!-- <view :class="{ click_category_title: index === active, category_title: index !== active }" v-for="(item, index) in goodsList" :key="index" @click="toggleTitle(index)"> -->
				<view :class="index===active ? 'click_category_title':'category_title'" v-for="(item, index) in goodsList" :key="index" @click="toggleTitle(index)">
					{{ item.cat_name }}
				</view>
			</scroll-view>
	
		<!-- 右侧结构 只能用v-show补救错误-->
		<scroll-view class="rightList" :scroll-y="true" v-for="(item,index) in goodsList" :key="index" v-show="index===active">
				<!-- 这里还需要遍历一层,把所有有的小分类都遍历出来 -->
				<view v-for="(value,key) in item.children" :key="key" style="margin-top:30rpx">
					<block v-if="index===active">
					<!-- 把只有标题的去除 -->
					<text class="right_title" v-if="!value.children.length==0">/ {{ value.cat_name }} /</text>
					<view class="goods_item_list">
						<navigator
							:url="`/pages/goods_list/index?query=${v.cat_name}&cid=${v.cat_id}`"
							class="goods_item"
							v-for="(v,i) in value.children"
							:key="i"
						>
							<image :src="v.cat_icon" style="width:120rpx;height:120rpx"></image>
							<text class="goods_name">{{ v.cat_name }}</text>
						</navigator>
					</view>
					</block>
				</view>
		</scroll-view>
	</view>
		</view>
</template>

<script>
import { get } from '@/uilts/http.js';
import searchBar from '../../components/searchBar.vue';
export default {
	components: {
		searchBar
	},
	data() {
		return {
			goodsList: [],
			active: 0 //存储遍历下标变量
		};
	},
	onLoad() {
		this.getCategoryData();
	},
	methods: {
		toggleTitle(index) {
			this.active = index;
		},
		// 封装获取列表数据
		async getCategoryData() {
			let res = await get('/categories');
			// if(res.data.meta.status===200){
			this.goodsList = res.data.message;
			// }
		}
	}
};
</script>

<style lang="less">
.category {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: calc(100vh - 100rpx);
}
.categoryList {
	display: flex;
	flex-direction: column;
	width: 182rpx;
	background-color: #f3f3f3;
	height: 100%;
}
.category_title {
	display: flex;
	justify-content: center;
	font-size: 28rpx;
	width: 182rpx;
	margin: 30rpx 0;
}
.click_category_title {
	color: #7d00ff;
	font-size: 30rpx;
	margin: 30rpx 0;
	display: flex;
	justify-content: center;
	width: 180rpx;
	border-left: 2rpx solid #7d00ff;
}
.rightList{
	flex: 1;
  height: 100%;
  background-color: #fff;
  top: 0;
  right: 0;
  width: 568rpx;
  margin-top: 20rpx;
  text-align: center;
}
.right_title{
  color: #575757;
  font-size: 26rpx;
  margin: 21rpx 0;
}
.goods_item_list{
  display: flex;
  flex-wrap: wrap;
}
.goods_item{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 120rpx;
  height: 150rpx;
  margin: 20rpx 35rpx;
}
.goods_name{
  color: #2E2E2E;
  font-size: 21rpx;
}
</style>
